<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" media="screen and (max-width:900px)" href="/assets/stylesheets/style_wap.css" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/style_pc.css" type="text/css" />
	<title>个人信息</title>
</head>
<body>
	<!-- 前端嵌套写法，仅供前端使用，首页有完整代码 -->
	<div class="topline" id="J_topline" data-test="1">
		<nav th:replace="hjh/include::menuV"></nav>
	</div>
	<div class="personal clearfix content">
		<div class="pl">
			<p class="pltil">基础信息</p>
			<div class="infom">
				<div class="formline">
					<div class="fline"><p class="ado">用户名：</p><p class="flinete" th:text="${session.user.username}">Np2847<span class="flti">用于登录，请牢记。</span></p></div>
					<div class="fline"><p class="ado">真实姓名：</p><input class="J_ctrol ctrol" data-form="per" data-target="name" type="text" placeholder="" name="" id="J_name" th:value="${session.user.name}"></div>
					<div class="fline flineb"><p class="ado">身份证号：</p><input class="J_ctrol ctrol" data-form="per" data-target="cardNumber" type="text" placeholder="" name="" id="J_ids" th:value="${session.user.cardNumber}"></div>
					<div class="fline flineb"><p class="ado">联系地址：</p><input class="J_ctrol ctrol" data-form="per" data-target="liveAddress" type="text" placeholder="" name="" id="J_adress" th:value="${session.user.liveAddress}"></div>
					<div class="fline flineb">
						<p class="ado">性别：</p>
						<p class="fradios">
							<a href="javascript:;" class="J_radio fcheck" th:classappend="${session.user.sex}==1?'fcheck_ed'"  data-form="per" data-val="1" data-target="sex" th:selected="${session.user.sex==1}">男</a>
							<a href="javascript:;" class="J_radio fcheck" th:classappend="${session.user.sex}==2?'fcheck_ed'" data-form="per" data-val="2" data-target="sex" th:selected="${session.user.sex==2}">女</a>
						</p>
					</div>
					<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn">提交</a></div>
				</div>
			</div>
		</div>
		<div class="pr">
			<p class="pltil">安全信息</p>
			<div class="prbox">
				<div class="prls">
					<img src="/assets/images/icon_setyes.png" class="prlsi">
					<p class="prlste">登录密码</p>
					<a href="javascript:;" data-target="#J_pop_log" class="J_prlsst prlsst">修改</a>
				</div>
				<div class="prls">
					<img th:src="${session.user.payPwd}!=null?'assets/images/icon_setyes.png':'assets/images/icon_setno.png'" class="prlsi">
					<p class="prlste">交易密码</p>
					<a href="javascript:;" data-target="#J_pop_deal" class="J_prlsst prlsst" th:text="${session.user.payPwd}!=null?'修改':'去设置'">去设置</a>
				</div>
				<div class="prls">
					<img th:src="${session.user.mobile}!=null?'assets/images/icon_setyes.png':'assets/images/icon_setno.png'" class="prlsi">
					<p class="prlste">手机号码</p>
					<a href="javascript:;" data-target="#J_pop_mobile" class="J_prlsst prlsst" th:text="${session.user.mobile}!=null?'修改':'去设置'">去设置</a>
				</div>
				<div class="prls">
					<img th:src="${session.user.email}!=null?'assets/images/icon_setyes.png':'assets/images/icon_setno.png'" class="prlsi">
					<p class="prlste">邮箱</p>
					<a href="javascript:;" data-target="#J_pop_email" class="J_prlsst prlsst" th:text="${session.user.email}!=null?'修改':'去设置'">去设置</a>
				</div>
			</div>
		</div>
	</div>
	<nav th:replace="hjh/include::bottomV"></nav>

	<!-- 登录密码弹层 -->
	<div class="pop personalpop" id="J_pop_log">
		<div class="pop_model">
			<div class="pop_model_til">修改登录密码<a href="javascript:;" data-target="#J_pop_log" class="J_pop_model_close pop_model_close"></a></div>
			<div class="formline">
				<div class="fline"><p class="ado">当前登录密码：</p><input class="J_ctrol ctrol" data-form="logdt" data-target="oldpwd" type="password" placeholder="" name="" id="J_oldpwd"></div>
				<div class="fline"><p class="ado">新登录密码：</p><input class="J_ctrol ctrol" data-form="logdt" data-target="newpwd" type="password" placeholder="" name="" id="J_newpwd"></div>
				<div class="fline"><p class="ado">确认新登录密码：</p><input class="J_ctrol ctrol" data-form="logdt" data-target="pwdag" type="password" placeholder="" name="" id="J_pwdag"></div>
				<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn_log">确认</a></div>
			</div>
		</div>
	</div>

	<!-- 交易密码弹层 -->
	<div class="pop personalpop" id="J_pop_deal">
		<div class="pop_model">
			<div class="pop_model_til">修改交易密码<a href="javascript:;" data-target="#J_pop_deal" class="J_pop_model_close pop_model_close"></a></div>
			<div class="formline">
				<div class="fline" th:if="${user.payPwd}"><p class="ado">当前登录密码：</p><input class="J_ctrol ctrol" data-form="dealdt" data-target="oldpwd" type="password" placeholder="" name="" id="J_currPayPwd"></div>
				<div class="fline"><p class="ado">交易密码：</p><input class="J_ctrol ctrol" data-form="dealdt" data-target="pwd" type="password" placeholder="" name="" id="J_payPwd"></div>
				<div class="fline"><p class="ado">确认交易密码：</p><input class="J_ctrol ctrol" data-form="dealdt" data-target="pwdag" type="password" placeholder="" name="" id="J_rePayPwd"></div>
				<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn_deal">确认</a></div>
			</div>
		</div>
	</div>

	<!-- 手机号弹层 -->
	<div class="pop personalpop" id="J_pop_mobile">
		<div class="pop_model">
			<div class="pop_model_til">修改手机号<a href="javascript:;" data-target="#J_pop_mobile" class="J_pop_model_close pop_model_close"></a></div>
			<div class="formline">
				<div class="fline" th:if="${session.user.mobile}"><p class="ado">当前手机号：</p><input type="text" class="J_ctrol ctrol" placeholder="" name="" th:value="${session.user.mobile}" disabled="disabled"></div>
				<div class="fline"><p class="ado">手机号：</p><input  type="text" class="J_ctrol ctrol"  placeholder="输入手机号" name="" id="J_mobile"></div>
				<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn_mobile">确认</a></div>
			</div>
		</div>
	</div>

	<!-- 手机号弹层 -->
	<div class="pop personalpop" id="J_pop_email">
		<div class="pop_model">
			<div class="pop_model_til">修改邮箱<a href="javascript:;" data-target="#J_pop_email" class="J_pop_model_close pop_model_close"></a></div>
			<div class="formline">
				<div class="fline" th:if="${session.user.email}"><p class="ado">当前手机号：</p><input type="text" class="J_ctrol ctrol" placeholder="" name="" th:value="${session.user.email}" disabled="disabled"></div>
				<div class="fline"><p class="ado">电子邮箱：</p><input  type="text" class="J_ctrol ctrol"  placeholder="输入电子邮箱" name="" id="J_email"></div>
				<div class="fline flinebtn"><a href="javascript:;" class="btn fbtm" id="J_btn_email">确认</a></div>
			</div>
		</div>
	</div>

	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
	<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
	<script type="text/javascript">
		$(function(){

			$('.J_ctrol').blur(function(){
				var self = $(this),
					val = self.val().trim(),
					type = self.attr('data-type')||'text',
					tar = self.attr('data-target'),
					from = self.attr('data-form');
				if(val){
					self.val(val);
					data[from][tar] = val; // 数据填充
				};
			});

			$('.J_radio').click(function(){
				var self = $(this),
					val = self.attr('data-val'),
					tar = self.attr('data-target'),
					from = self.attr('data-form');
				if(val){
					self.addClass('fcheck_ed').siblings().removeClass('fcheck_ed');
					data[from][tar] = val; // 数据填充
				};
			});
			console.log(data);


			//基础信息
			var J_btn = $('#J_btn'),
				isajax = false, // 设置开关
				data = {
					"per":{}, // 个人信息对象
					"logdt":{}, // 登录信息对象
					"dealdt":{}, // 交易信息对象
					"phonedt":{}, // 手机信息对象
					"emaildt":{} // 邮箱信息对象
				};


			J_btn.click(function(){
				if(isajax){return false;}

				data.per.name=$('#J_name').val();
				data.per.cardNumber=$('#J_ids').val();
                data.per.liveAddress=$('#J_adress').val();
                data.per.sex = $('.fcheck_ed').attr('data-val');
				if(!data.per.name){
					errormsg($('#J_name'),'请输入真实姓名');
					return;
				};
				if(!data.per.cardNumber){
					errormsg($('#J_ids'),'请输入身份证号');
					return;
				};
				if(!data.per.liveAddress){
					errormsg($('#J_adress'),'请输入联系地址');
					return;
				};

				//ajax提交数据
//				alert('提交的数据：'+JSON.stringify(data.per));
				isajax = true;
				J_btn.html("正在提交···");
				$.ajax({
					type: "POST",
					url: "/updateProfile",
					data: JSON.stringify(data.per),
					dataType: "json",
					contentType:"application/json",
					success: function(res){
						if(res.code==0){
							// 提交成功
							alert('提交成功');
							window.location.href = window.location.href;
						}else{
							J_btn.html("提交");
						};
					},
					complete:function(){
						isajax = false;
					}
				});
			});

			// 弹框显示
			$('.J_prlsst').click(function(){
				var self = $(this),
					tar = $(self.attr('data-target'));
				tar.show();
				setTimeout(function(){
					tar.addClass('pop_active')
				},10);
			});

			$('.J_pop_model_close').click(function(){
				console.log($(this).attr('data-target'))
				$($(this).attr('data-target')).hide().removeClass('pop_active');
			});

			//登录密码部分
			var J_btn_log = $('#J_btn_log');
			J_btn_log.click(function(){
				if(isajax){return false;}
				data.logdt.currLoginPwd = $('#J_oldpwd').val();
                data.logdt.loginPwd = $('#J_newpwd').val();
                data.logdt.reLoginPwd = $('#J_pwdag').val();

				if(!data.logdt.currLoginPwd){
					errormsg($('#J_oldpwd'),'输入的当前登录密码');
					return false;
				};
				if(!data.logdt.loginPwd ||data.logdt.loginPwd!=data.logdt.reLoginPwd){
					errormsg($('#J_newpwd'),'输入的新密码两次不一致');
					return false;
				};

				//ajax提交数据
//				alert('提交的数据：'+JSON.stringify(data.logdt));
				isajax = true;
				J_btn_log.html("正在提交···");
				$.ajax({
					type: "POST",
					url: "/modify_login_pwd",
					data: JSON.stringify(data.logdt),
					dataType: "json",
					contentType:"application/json",
					success: function(res){
						if(res.code==0){
							// 提交成功
                            alert('提交成功');
							window.location.href = window.location.href; // 刷新
						}else{
							errormsg($('#J_newpwd'),'修改失败');
						};
					},
					complete:function(){
						J_btn_log.html("确认");
						isajax = false;
					}
				});
			});

			//交易密码部分
			var J_btn_deal = $('#J_btn_deal');
			var payPwdData = {};
			J_btn_deal.click(function(){
				payPwdData.currPayPwd = $("#J_currPayPwd").val();
				payPwdData.payPwd = $("#J_payPwd").val();
				payPwdData.rePayPwd = $("#J_rePayPwd").val();

				//ajax提交数据
				//alert('提交的数据：'+JSON.stringify(payPwdData));
				isajax = true;
				J_btn_deal.html("正在提交···");
				$.ajax({
					type: "POST",
					url: "/modify_pay_pwd?v="+(new Date().getTime()),
					data: JSON.stringify(payPwdData),
					dataType: "json",
					contentType:"application/json",
					success: function(res){
						console.log(res);
						if(res.code==0){
                            alert('提交成功');
							// 提交成功
							window.location.href = window.location.href; // 刷新
						}else{
							if(res.code==101){
								errormsg($('#J_currPayPwd'),res.msg);
							}else{
								errormsg($('#J_rePayPwd'),res.msg);
							}
						};
					},
					complete:function(){
						J_btn_deal.html("确认");
						isajax = false;
					}
				});
			});

            $('#J_btn_mobile').click(function () {
				var newMobile = $("#J_mobile").val();
				if(!checkMobile(newMobile)){
                    errormsg($('#J_mobile'),"非法的手机号");
                    return;
				}
                $('#J_btn_mobile').html("正在提交···");
                $.ajax({
                    type: "POST",
                    url: "/modify_mobile?mobile="+newMobile,
                    success: function(res){
                        console.log(res);
                        if(res.code==0){
                            alert('提交成功');
                            // 提交成功
                            window.location.href = window.location.href; // 刷新
                        }else{
                            if(res.code==101){
                                errormsg($('#J_mobile'),res.msg);
                            }else{
                                errormsg($('#J_mobile'),res.msg);
                            }
                        };
                    },
                    complete:function(){
                        $('#J_mobile').html("确认");
                    }
                });
            });

            $('#J_btn_email').click(function () {
                var newMobile = $("#J_email").val();
                if(!newMobile){
                    errormsg($('#J_email'),"邮箱不能为空");
                    return;
                }
                $('#J_btn_email').html("正在提交···");
                $.ajax({
                    type: "POST",
                    url: "/modify_email?email="+newMobile,
                    success: function(res){
                        console.log(res);
                        if(res.code==0){
                            alert('提交成功');
                            // 提交成功
                            window.location.href = window.location.href; // 刷新
                        }else{
                            if(res.code==101){
                                errormsg($('#J_email'),res.msg);
                            }else{
                                errormsg($('#J_email'),res.msg);
                            }
                        };
                    },
                    complete:function(){
                        $('#J_email').html("确认");
                    }
                });
            });

		});
        function checkMobile(sMobile){
            return /^1[3|4|5|8][0-9]\d{4,8}$/.test(sMobile)
        }
	</script>
</body>
</html>
